<template>
	<view class="padding">
		<!-- 自定义导航 -->
		<custom-navbar :title='title' bgColor='#0081ff' navbarStyle ='home' ></custom-navbar>
		<!-- 行程内容 -->
		<view class="driverTripModule" :style="{ height: $height * 0.3 + 'px' }" v-for="(item,index) in driverList"
			:key="index">
			<view class="flex-row height-bth solid-bottom">
				<image style="width: 40rpx; height: 40rpx;" src="../../static/icon/driverCar.png" />
				<view class="flex-sub flex-row margin-left">
					<view class="flex-sub text-df text-bold">今日出行</view>
					<view class="flex-sub flex justify-end">{{item.tripStatusDic}}</view>
				</view>
			</view>
			<view class="flex flex-direction" :style="{ height: $height * 0.25 + 'px' }">
				<view class=" flex-row " style="flex: 25%;">
					<view class="text-d text-bold">出发地:</view>
					<view>{{item.setoutPlace}}({{item.setoutRegion}})</view>
				</view>
				<view class=" flex-row " style="flex: 25%;">
					<view class="text-d text-bold">目的地:</view>
					<view>{{item.destinationPlace}}({{item.destinationRegion}})</view>
				</view>
				<view class="flex-sub flex-row solid-bottom" style="flex: 20%;">出行时间：{{item.tripTime}}</view>
				<view class="flex-row" style="flex: 30%;">
					<view style="width: 50%;" />
					<view class="flex-row flex-sub " :class="{'justify-center': item.tripStatus == '3'}">
						<view class="flex-sub flex-allCenter ">
							<button class="cu-btn sm bg-green-light " @click="getPassengers(item.tripId)"
								:style="{ height: $height * 0.04 + 'px',width: '90%',fontSize:'24upx' }">
								乘客详情</button>
						</view>
						<view v-if="item.tripStatus!=3" class="flex-sub flex-allCenter ">
							<button class="cu-btn sm bg-blue-light width" v-if="item.tripStatus==0" @click="submit(item)"
								:style="{ height: $height * 0.04 + 'px',width: '90%',fontSize:'24upx' }">去接客</button>
							<button class="cu-btn sm bg-blue-light width" v-else-if="item.tripStatus==1" @click="submit(item)"
									:style="{ height: $height * 0.04 + 'px',width: '90%',fontSize:'24upx' }">出发</button>
							<button class="cu-btn sm bg-blue-light width" v-else-if="item.tripStatus==2" @click="submit(item)"
									:style="{ height: $height * 0.04 + 'px',width: '90%',fontSize:'24upx' }">到达</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部tabBar -->
		<u-tabbar :value="tabBarvalue" @change="change" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
			<u-tabbar-item text="行程" icon="car"></u-tabbar-item>
			<u-tabbar-item text="排班" icon="calendar"></u-tabbar-item>
			<u-tabbar-item text="消息" icon="chat"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		changeMenu,
		eventList
	} from '../../api/constant';
	import {
		editTrip,
		getTrip
	} from '../../api/tripApi';
	export default {
		data() {
			return {
				tabBarvalue: 1,
				title:'今日行程',
				tripInfoList: eventList,
				driverList: [],
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			/**tabBar切换*/
			change(param) {
				changeMenu(param);
			},
			/**今日行程列表*/
			getList() {
				// let driverId = uni.getStorageSync('login_user_info').userId;
				// console.log('司机Id是：',driverId);
				let driverid = this.$store.getters.userid;
				let param = {
					driverId: driverid
				}
				getTrip(param).then(res => {
					this.driverList = res.data.data
				})
			},
			/**调整行程状态*/
			submit(param) {
				let status = '';
				if(param.tripStatus=='0'){
					status = '1'
				}else if(param.tripStatus=='1'){
					status = '2'
				}else if(param.tripStatus=='2'){
					status = '3'
				}else{
					console.log('异常状态：',param.tripStatus);
				}
				let params = {
					tripStatus: status,
					tripId: param.tripId,
					carId: param.carId,
					driverId: param.driverId
				}
				editTrip(params).then(res => {
					if (res.data.code == 200) {
						this.$modal.msgSuccess(res.data.msg)
						this.$modal.nextSuccess(res.data.msg).then(()=>{
							this.getList();
						})
					} else {
						this.$modal.msg(res.data.msg)
					}
				})
			},
			/**查看乘客详情*/
			getPassengers(param){
				this.$tab.navigateTo(`/pages/trip/passengersDetail?tripId=${param}`)
			}

		}
	}
</script>

<style>
	
	
	.driverTripModule {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 30rpx;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}
</style>